<template>
	<PageLayout :navbarShow="false">
		<view class="wrap"> <wd-navbar title="活动详情" left-text="返回" left-arrow @click-left="handleClickLeft"
				safeAreaInsetTop></wd-navbar></view>
		<view class="activity-banner">
			<image src="https://picsum.photos/750/300" mode="widthFix" class="banner-img" alt="活动宣传图">
			</image>
			<view class="activity-tag" v-if="activityInfo.tag">
				{{ activityInfo.tag }}
			</view>
		</view>
		<scroll-view class="activity-content" scroll-y>
			<view class="activity-header">
				<h1 class="activity-title">{{ activityInfo.title }}</h1>
				<view class="share" @click="share">
					<icon type="share" size="20" color="#666"></icon>
					<text class="share-text" @click="share">分享给好友</text>
				</view>
			</view>
			<view class="activity-info">
				<view class="info-item">
					<icon type="calendar" size="16" color="#F56C6C"></icon>
					<text class="info-text">
						活动时间：{{formatDate(activityInfo.activityStartTime)}} -
						{{formatDate(activityInfo.activityEndTime)}}
					</text>
				</view>
				<view class="info-item">
					<icon type="location" size="16" color="#409EFF"></icon>
					<text class="info-text">
						活动地点：{{ activityInfo.address || '线上活动' }}
					</text>
				</view>
				<view class="info-item">
					<icon type="user" size="16" color="#67C23A"></icon>
					<text class="info-text">
						已有：{{activityInfo.signupCount !== null ? activityInfo.signupCount : 0 }}人报名
					</text>
				</view>
				<view class="info-item">
					<text class="info-text">
						人员
					</text>
					<view class="active-box" v-for="item in activityInfo.signupMembers" :key="item.id">
						<view class="signup">{{ item.userName }}</view>
					</view>
				</view>
			</view>

			<view class="activity-detail">
				<h2 class="detail-title">活动详情</h2>
				<view class="detail-content">{{activityInfo.content}}</view>
			</view>
		</scroll-view>
		<view class="action-bar">
			<view class="button-group">
				<view class="btn-view primary-btn" @click="addActivity">立即参与</view>
				<view class="btn-view secondary-btn" @click="cancelActivity">取消参与</view>
			</view>
		</view>
	</PageLayout>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		http
	} from '@/utils/http'
	import {
		useUserStore
	} from '@/store/user'
	import {
		useToast,
		useMessage,
		useNotify,
		dayjs
	} from 'wot-design-uni'
	const userStore = useUserStore()
	const toast = useToast()
	const routeParams = ref({})
	const showData = ref({})
	const activityInfo = ref('')
	onLoad((options) => {
		routeParams.value = options
		initData()
	})
	const initData = () => {
		http.get('/chamber/ccActivity/queryById', {
				id: routeParams.value.id,
			})
			.then((res) => {
				if (res.success) {
					console.log(res.result)
					activityInfo.value = res.result

				}
			})
	}
	const handleClickLeft = () => {
		uni.navigateBack()
	}
	const share = () => {
		uni.downloadFile({
			url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',
			success: (res) => {
				wx.showShareImageMenu({
					path: res.tempFilePath,
				})
			},
		})
	}
	// 格式化日期
	const formatDate = (dateStr) => {
		if (dateStr == undefined || dateStr == null) {
			return '';
		}
		const spaceIndex = 10
		const datePart = spaceIndex !== -1 ? dateStr.substring(0, spaceIndex) : dateStr;
		return datePart;
	}

	const addActivity = () => {
		console.log(userStore.userInfo)
		http.post('/chamber/ccActivitySignup/signup', {
				activityId: activityInfo.value.id,
				memberId: userStore.userInfo.id
			})
			.then((res) => {
				if (res.success) {
					toast.show("成功参加");
				} else {
					toast.show("已经参加");
				}
			})

	}

	const cancelActivity = () => {
		http.post('/chamber/ccActivitySignup/cancelSignup?activityId=' + activityInfo.value.id + "&memberId=" +
				userStore.userInfo.id, {
					
				})
			.then((res) => {
				if (res.success) {
					toast.show("取消成功");
				} else {
					toast.show("已经取消");
				}
			})
	}
</script>


<style scoped>
	.wrap {
		height: 100%;
	}

	:deep(.wd-navbar) {
		background: linear-gradient(45deg, #0081ff, #1cbbb4);
		height: 25px;
	}

	.signup {
		margin-left: 20px;
	}

	/* 活动头部 banner */
	.activity-banner {
		position: relative;
		width: 100%;
	}

	.banner-img {
		width: 100%;
		height: auto;
	}

	.activity-tag {
		position: absolute;
		top: 15rpx;
		left: 15rpx;
		background-color: #F56C6C;
		color: #fff;
		padding: 8rpx 15rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: bold;
	}

	/* 活动头部 */
	.activity-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 30rpx 25rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.activity-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
		flex: 1;
		margin-right: 20rpx;
	}

	.share {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
	}

	.share-text {
		font-size: 22rpx;
		color: #666;
		margin-top: 5rpx;
	}

	/* 活动信息 */
	.activity-info {
		padding: 25rpx;
		background-color: #f9f9f9;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-text {
		font-size: 28rpx;
		color: #666;
		margin-left: 15rpx;
		line-height: 1.5;
	}

	/* 倒计时 */
	.countdown-box {
		padding: 25rpx;
		background-color: #fff8e1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.countdown-box.ended {
		background-color: #fef0f0;
	}

	.countdown-box.not-start {
		background-color: #f0f7ff;
	}

	.countdown-text {
		font-size: 30rpx;
		font-weight: bold;
		color: #e6a23c;
		margin-bottom: 15rpx;
	}

	.countdown-box.ended .countdown-text {
		color: #f56c6c;
	}

	.countdown-box.not-start .countdown-text {
		color: #409eff;
	}

	.countdown {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.time-item {
		width: 60rpx;
		height: 60rpx;
		background-color: #e6a23c;
		color: #fff;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
		margin: 0 5rpx;
	}

	.countdown-box.ended .time-item {
		background-color: #f56c6c;
	}

	.countdown-box.not-start .time-item {
		background-color: #409eff;
	}

	.time-colon {
		font-size: 30rpx;
		color: #e6a23c;
		margin: 0 5rpx;
	}

	.countdown-box.ended .time-colon {
		color: #f56c6c;
	}

	.countdown-box.not-start .time-colon {
		color: #409eff;
	}

	.countdown-desc {
		font-size: 24rpx;
		color: #e6a23c;
	}

	.countdown-box.ended .countdown-desc,
	.countdown-box.not-start .countdown-desc {
		display: none;
	}

	/* 活动详情 */
	.activity-detail {
		padding: 30rpx 25rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.detail-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 2px solid #f5f5f5;
	}

	.detail-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.8;
	}

	.detail-content p {
		margin-bottom: 20rpx;
	}

	.detail-content ul {
		margin-left: 40rpx;
		margin-bottom: 20rpx;
	}

	.detail-content li {
		margin-bottom: 10rpx;
		list-style-type: disc;
	}

	/* 活动规则 */
	.activity-rules {
		padding: 30rpx 25rpx;
	}

	.rules-list {
		margin-top: 20rpx;
	}

	.rule-item {
		display: flex;
		margin-bottom: 25rpx;
		align-items: flex-start;
	}

	.rule-number {
		width: 40rpx;
		height: 40rpx;
		background-color: #f5f5f5;
		color: #666;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		margin-right: 15rpx;
		flex-shrink: 0;
	}

	.rule-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}

	/* 底部操作栏 */
	.action-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-top: 1px solid #f5f5f5;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		box-sizing: border-box;
	}

	.action-bar.joined {
		background-color: #f0f9eb;
	}

	.action-left {
		display: flex;
		align-items: center;
	}

	.price {
		font-size: 32rpx;
		color: #f56c6c;
		font-weight: bold;
	}

	.free {
		font-size: 32rpx;
		color: #67c23a;
		font-weight: bold;
	}

	.joined-text {
		font-size: 30rpx;
		color: #67c23a;
		margin-left: 10rpx;
	}

	.disabled-text {
		font-size: 30rpx;
		color: #999;
	}

	/* 滚动内容样式 */
	.activity-content {
		padding-bottom: 140rpx;
		/* 留出底部操作栏空间 */
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* 父容器使用flex实现水平排列 */
	.button-group {
		display: flex;
		gap: 16rpx;
		/* 两个按钮之间的间距 */
		padding: 20rpx;
		justify-content: center;
		/* 整体居中显示 */
	}

	/* 按钮基础样式 */
	.btn-view {
		min-width: 160rpx;
		height: 80rpx;
		border-radius: 40rpx;
		/* 圆角 */
		display: flex;
		align-items: center;
		/* 文字垂直居中 */
		justify-content: center;
		/* 文字水平居中 */
		font-size: 32rpx;
		font-weight: 500;
		padding: 0 30rpx;
		cursor: pointer;
		/* 鼠标悬停显示手型 */
		transition: all 0.2s;
		/* 点击效果过渡 */
	}

	/* 点击时的效果 */
	.btn-view:active {
		transform: scale(0.98);
		/* 轻微缩小效果 */
	}

	/* 主按钮样式 */
	.primary-btn {
		background-color: #409eff;
		color: #ffffff;
	}

	/* 次要按钮样式 */
	.secondary-btn {
		background-color: #f5f5f5;
		color: #666666;
		border: 1px solid #e5e5e5;
	}
</style>